<template>
  <div class="distribution-list-confirm">
    <!-- 名单分配 -->
    <div class="list-distribution">
      <div class="list-header">
        <h1>名单分配</h1>
      </div>
      <div class="list-table">
        <vx-table :table-data="tableData" :columns="columns"></vx-table>
      </div>
    </div>
    <!-- 名单列表 -->
    <div class="list-content">
      <div class="list-header">
        <h1>名单列表</h1>
      </div>
      <div class="list-table">
        <vx-table :table-data="managerData" :columns="managerColumns"></vx-table>
        <div class="page">
          <ui-pagination
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            :layout="layout"
            :page-sizes="pageSizeList"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </ui-pagination>
          <p class="footer-info">分配客户总数：6个</p>
        </div>
      </div>
    </div>
    <!-- 按钮 -->
    <ui-row type="flex" class="row-bg" justify="center">
      <ui-button type="primary" plain @click="returnPrePage">返 回</ui-button>
      <ui-button type="primary" plain @click="goDistribution">确 认</ui-button>
    </ui-row>
  </div>
</template>

<script>
import vxTable from '@/components/vx-table';
export default {
  name:'distribution-list-confirm',
  components: {
    vxTable,
  },
  data() {
    return {
      total: 100,
      tableData: [{ userName: 1, updatedBy: '1', customerBy: '1', managetype: '1' }],
      columns: [
        {
          prop: 'userName',
          label: '客户经理名称',
          fixed: true,
          width: '120',
        },
        {
          prop: 'updatedBy',
          label: '客户经理所属机构',
          fixed: true,
        },
        {
          prop: 'customerBy',
          label: '客户经理编号',
          fixed: true,
        },
        {
          prop: 'managetype',
          label: '管理类型',
          formatter: (row, column, cellValue, index) => {
            return cellValue === '1' ? '主办' : '协办';
          },
          fixed: true,
        },
      ],
      managerData: [{ customerNo: '1', customerName: '1', customerOrg: '1', customerType: '1' }],
      managerColumns: [
        {
          prop: 'customerNo',
          label: '客户号',
          fixed: true,
          width: '120',
        },
        {
          prop: 'customerName',
          label: '客户名称',
          fixed: true,
        },
        {
          prop: 'customerOrg',
          label: '所属机构',
          fixed: true,
        },
        {
          prop: 'customerType',
          label: '分配状态',
          fixed: true,
        },
      ],
    };
  },
  methods:{
    // 跳转到名单确认结果页面
    goDistribution(){
      this.$router.push({path:'/customerdivision/distribution/distributionlistresult'})
    }
  }
};
</script>

<style lang="scss" scoped>
.distribution-list-confirm {
  .list-distribution,
  .list-content {
    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h1 {
        font-size: 20px;
      }
    }
    .list-table {
      margin-top: 20px;
      .page {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        p{
          width: 100%;
          margin-top: 10px;
          text-align: right;
          
        }
      }
    }
  }
  .list-content {
    margin-top: 20px;
  }
  .search-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .search-left {
      h1 {
        width: 105px;
        font-size: 16px;
      }
      display: flex;
      align-items: center;
      width: 50%;
    }
  }
}
</style>
